<template>
  <div class="user-center">
    <Header />
    <div class="container">
      <div class="content">
        <!-- 用户信息头部 -->
        <div class="user-header">
          <div class="user-info">
            <img :src="user.avatar" :alt="user.nickname" class="avatar">
            <div class="info">
              <h2 class="nickname">{{ user.nickname }}</h2>
              <p class="title">{{ user.title }}</p>
            </div>
          </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="main-content">
          <!-- 导航标签 -->
          <div class="nav-tabs">
            <a 
              v-for="tab in tabs" 
              :key="tab.key"
              :class="['tab-item', { active: currentTab === tab.key }]"
              @click="currentTab = tab.key"
            >
              {{ tab.text }}
            </a>
          </div>

          <!-- 我的订单 -->
          <div v-show="currentTab === 'orders'" class="tab-content orders-content">
            <div class="order-list">
              <div v-for="order in orders" :key="order.id" class="order-item">
                <div class="order-header">
                  <span class="order-time">{{ order.createTime }}</span>
                  <span class="order-number">订单号：{{ order.orderNumber }}</span>
                </div>
                <div class="order-body">
                  <img :src="order.courseImage" :alt="order.courseTitle" class="course-image">
                  <div class="order-info">
                    <h3 class="course-title">{{ order.courseTitle }}</h3>
                    <p class="course-desc">{{ order.courseDesc }}</p>
                    <div class="order-meta">
                      <span class="validity">有效期：{{ order.validity }}</span>
                      <span class="price">¥{{ order.price }}</span>
                    </div>
                  </div>
                  <div class="order-status">
                    <span :class="['status-tag', order.status]">{{ order.statusText }}</span>
                    <div class="action-buttons">
                      <button v-if="order.status === 'success'" class="action-btn" @click="goToStudy(order)">
                        立即学习
                      </button>
                      <button v-if="order.status === 'pending'" class="action-btn" @click="cancelOrder(order)">
                        取消订单
                      </button>
                      <button class="action-btn" @click="viewOrderDetail(order)">订单详情</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 个人资料 -->
          <div v-show="currentTab === 'profile'" class="tab-content profile-content">
            <div class="profile-form">
              <div class="form-item">
                <label>昵称</label>
                <input type="text" v-model="userProfile.nickname" placeholder="请输入昵称">
              </div>
              <div class="form-item">
                <label>手机号</label>
                <div class="phone-wrapper">
                  <input type="text" v-model="userProfile.phone" placeholder="请输入手机号" disabled>
                  <button class="modify-btn">修改</button>
                </div>
              </div>
              <div class="form-item">
                <label>头衔</label>
                <input type="text" v-model="userProfile.title" placeholder="请输入头衔">
              </div>
              <div class="form-item">
                <label>个人简介</label>
                <textarea v-model="userProfile.bio" placeholder="请输入个人简介"></textarea>
              </div>
              <div class="form-actions">
                <button class="save-btn" @click="saveProfile">保存修改</button>
              </div>
            </div>
          </div>

          <!-- 账号安全 -->
          <div v-show="currentTab === 'security'" class="tab-content security-content">
            <div class="security-list">
              <div class="security-item">
                <div class="security-info">
                  <h3>登录密码</h3>
                  <p>建议您定期更换密码，设置安全性高的密码可以使账号更安全</p>
                </div>
                <button class="modify-btn" @click="modifyPassword">修改</button>
              </div>
              <div class="security-item">
                <div class="security-info">
                  <h3>手机绑定</h3>
                  <p>已绑定：{{ userProfile.phone }}</p>
                </div>
                <button class="modify-btn" @click="modifyPhone">修改</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import Header from '../components/Header.vue'

const router = useRouter()
const currentTab = ref('orders')

const tabs = [
  { key: 'orders', text: '我的订单' },
  { key: 'profile', text: '个人资料' },
  { key: 'security', text: '账号安全' }
]

// 用户信息
const user = ref({
  nickname: 'moluooo',
  title: '莫落',
  avatar: 'https://img61.ddimg.cn/2024/3/26/2024032610360944729.jpg'
})

// 订单列表
const orders = ref([
  {
    id: 1,
    orderNumber: '201903211117728592',
    createTime: '2019-03-21 11:17:28',
    courseTitle: 'Windows下双版本Python环境安装',
    courseDesc: '专属新手21天零基础入门人工智能领域的必修课',
    courseImage: 'https://img3m5.ddimg.cn/19/33/12100014055-1_h_1738829405.jpg',
    validity: '永久有效',
    price: '免费',
    status: 'success',
    statusText: '交易成功'
  },
  {
    id: 2,
    orderNumber: '201903211117715584',
    createTime: '2019-03-21 11:17:15',
    courseTitle: 'Go语言15天入门到实战系列',
    courseDesc: '从零开始学习Go语言，掌握Go语言编程基础知识',
    courseImage: 'https://img3m1.ddimg.cn/64/27/12100020931-1_h_1739000101.jpg',
    validity: '永久有效',
    price: '699.00',
    status: 'pending',
    statusText: '超时取消'
  }
])

// 个人资料
const userProfile = ref({
  nickname: 'moluooo',
  phone: '138****8888',
  title: '莫落',
  bio: ''
})

// 保存个人资料
const saveProfile = () => {
  // TODO: 实现保存个人资料的逻辑
  console.log('保存个人资料:', userProfile.value)
}

// 修改密码
const modifyPassword = () => {
  // TODO: 实现修改密码的逻辑
  console.log('修改密码')
}

// 修改手机号
const modifyPhone = () => {
  // TODO: 实现修改手机号的逻辑
  console.log('修改手机号')
}

// 立即学习
const goToStudy = (order) => {
  router.push(`/course-study/?courseId=${order.id}`)
}

// 取消订单
const cancelOrder = (order) => {
  // TODO: 实现取消订单的逻辑
  console.log('取消订单:', order.id)
}

// 查看订单详情
const viewOrderDetail = (order) => {
  // TODO: 实现查看订单详情的逻辑
  console.log('查看订单详情:', order.id)
}
</script>

<style scoped>
.user-center {
  min-height: 100vh;
  background: #f5f5f5;
  padding-top: 64px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.content {
  max-width: 100%;
  margin: 0;
  padding: 20px 0;
}

.user-header {
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  padding: 40px 60px;
  border-radius: 8px;
  margin-bottom: 20px;
  color: white;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.info .nickname {
  font-size: 24px;
  margin: 0 0 8px;
  color: white;
}

.info .title {
  font-size: 14px;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
}

.main-content {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.nav-tabs {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
  padding: 0 20px;
}

.tab-item {
  padding: 16px 24px;
  font-size: 15px;
  color: #666;
  cursor: pointer;
  position: relative;
  transition: all 0.3s;
}

.tab-item:hover {
  color: #1890ff;
}

.tab-item.active {
  color: #1890ff;
  font-weight: 500;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #1890ff;
}

.tab-content {
  padding: 24px;
}

.orders-content {
  min-height: 400px;
}

.order-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.order-item {
  background: #fafafa;
  border-radius: 8px;
  overflow: hidden;
}

.order-header {
  display: flex;
  justify-content: space-between;
  padding: 12px 20px;
  background: white;
  border-bottom: 1px solid #f0f0f0;
}

.order-time {
  color: #666;
  font-size: 14px;
}

.order-number {
  color: #999;
  font-size: 14px;
}

.order-body {
  display: grid;
  grid-template-columns: 280px 1fr 180px;
  gap: 32px;
  padding: 24px 32px;
  background: white;
  align-items: center;
}

.course-image {
  width: 280px;
  height: 157px;
  border-radius: 8px;
  object-fit: cover;
}

.order-info {
  min-width: 0;
}

.order-info .course-title {
  font-size: 18px;
  margin: 0 0 12px;
}

.order-info .course-desc {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 16px;
}

.order-meta {
  display: flex;
  justify-content: space-between;
  color: #666;
  font-size: 14px;
}

.order-status {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.status-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 14px;
}

.status-tag.success {
  background: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.status-tag.pending {
  background: #fff7e6;
  color: #fa8c16;
  border: 1px solid #ffd591;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.action-btn {
  padding: 6px 16px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: white;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
}

.action-btn:hover {
  color: #1890ff;
  border-color: #1890ff;
}

/* 个人资料表单样式 */
.profile-form {
  max-width: 600px;
}

.form-item {
  margin-bottom: 24px;
}

.form-item label {
  display: block;
  margin-bottom: 8px;
  color: #333;
}

.form-item input,
.form-item textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
}

.form-item textarea {
  height: 100px;
  resize: vertical;
}

.phone-wrapper {
  display: flex;
  gap: 16px;
}

.phone-wrapper input {
  flex: 1;
}

.modify-btn {
  padding: 8px 16px;
  border: 1px solid #1890ff;
  border-radius: 4px;
  background: white;
  color: #1890ff;
  cursor: pointer;
  transition: all 0.3s;
}

.modify-btn:hover {
  background: #e6f7ff;
}

.form-actions {
  margin-top: 32px;
}

.save-btn {
  padding: 8px 32px;
  border: none;
  border-radius: 4px;
  background: #1890ff;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.save-btn:hover {
  background: #40a9ff;
}

/* 账号安全样式 */
.security-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.security-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
}

.security-info h3 {
  font-size: 16px;
  color: #333;
  margin: 0 0 8px;
}

.security-info p {
  font-size: 14px;
  color: #666;
  margin: 0;
}
</style> 